<template>
    <div class="edit">
        <ToolBar2 :names="names"></ToolBar2>
        <div class="content">
            <div class="list-item" v-for="(l,index) in list" :key="index">
                <div class="left">
                    <span>
                        <input type="checkbox" :checked="isChecked||checkedId.indexOf(l.id)>-1" class="input_check" :id="index" @change="getcheck(l.id)"/>
                        <label :for="index"></label>
                    </span>
                    <span class="title">
                        <span class="name">{{l.title}} <span>/USDT</span></span>
                        <span class="desc">{{l.platform}}</span>
                    </span>
                </div>
                <div class="right">
                    <span><img :src="operate" alt=""></span>
                </div>
            </div>
        </div>
        <div class="all">
            <span class="allCheck">
                <input type="checkbox" :checked="isChecked" class="input_check" id="check2" @change="checkedAll" />
                        <label for="check2"></label>&nbsp;&nbsp;全选
            </span>
            <span class="delete" @click="delData">删除</span>
        </div>
    </div>
</template>

<script>
    import ToolBar2 from "@/components/Home/ToolBar2.vue"
    import operate from "@/assets/img/ic_operate.png"
    
    export default {
        name: "Edit",
        components:{
            ToolBar2
        },
        data(){
            return {
                names:'高低提醒',
                operate:operate,
                list:[],
                checkedId:[],
                isChecked:false
            }
        },
        mounted() {
            this.getList()
        },
        methods:{
            getList(){
                this.$api.home.HeightRemindList(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.list = res.data.data
                })
            },
            delData(){
                const id = this.checkedId.join(',')

                this.$dialog.confirm({
                    title: '删除提示',
                    message: '确定删除吗?'
                }).then(() => {
                    this.$api.home.HeightRemindDel(this.getCookie('token'),id).then(res=> {
                        // 执行某些操作
                        this.$toast({
                            message: res.data.msg,
                            duration: 1000,
                            forbidClick: true
                        })
                        this.getList()

                    })
                }).catch(() => {
                    // on cancel
                });

            },
            getcheck(id){
                if(event.target.checked){
                    this.checkedId.push(id)

                }
                else{
                    this.isChecked = false
                    const index = this.checkedId.indexOf(id);
                    if (index > -1) {
                        this.checkedId.splice(index, 1);
                    }
                }

                if(this.checkedId.length == this.list.length){
                    this.isChecked = true
                }else {
                    this.isChecked = false
                }

            },
            checkedAll(){
                this.checkedId = []
                this.isChecked = event.target.checked
                if(this.isChecked){
                    for(const i of this.list){
                        this.checkedId.push(i.id)
                    }

                }else{
                    this.checkedId = []
                }
            }
        }


    }
</script>

<style scoped>
    .edit{
        position: relative;
        top: 3rem;
        left: 0;
        right: 0;
    }
    .content{
        background: #fff;
        position: absolute;
        min-height: 6rem;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 5rem;
    }
    .list-item .input_check {
        position: absolute;
        width: 20px;
        height: 20px;
        visibility: hidden;
    }
    .list-item .input_check+label {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('../../assets/img/icon_pay_uncheck.png') no-repeat;
        background-size: contain;
        border-radius: 50%;
    }
    .list-item .input_check:checked+label {

        background: url('../../assets/img/icon_pay_check.png') no-repeat;
        background-size: contain;
    }

    .all .input_check {
        position: absolute;
        width: 20px;
        height: 20px;
        visibility: hidden;
    }
    .all .input_check+label {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('../../assets/img/icon_pay_uncheck.png') no-repeat;
        background-size: contain;
        border-radius: 50%;
    }
    .all .input_check:checked+label {

        background: url('../../assets/img/icon_pay_check.png') no-repeat;
        background-size: contain;
    }
    .list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:1rem 0;
        border-bottom: 1px solid #e7e7e7;
    }
    .list-item .left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 30%;
    }
    .list-item .left .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 1rem;
    }
    .list-item .left .title span{
        width: 100%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;

    }
    .list-item .left .title .name{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-bottom: 0.5rem;
    }
    .list-item .left .title .name span{
        font-size: 0.64rem;
        color: #999;
    }
    .list-item .left .title .desc{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(124,151,139,1);
    }
    .right img{
        display: block;
        width:1.38rem;
        height:1.06rem;
    }
    .all{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        height: 3.06rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .all .allCheck{
        padding-left: 2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size:1.06rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        height: 100%;
        width: 50%;
    }
    .delete{
        font-size:1.06rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        height: 100%;
        width: 50%;
        background:rgba(20,163,101,1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>